import React, { useState } from 'react';
/*
  学习目标：Hooks钩子函数的三个限制
  步骤：
     1. 不能在条件语句中使用（if...else）
     2. 不能在循环语句中使用（for循环等）
     3. 不能再普通函数中使用（以小写字母开头的，不是以use开头的，以use开头但不是驼峰命名的函数等）
*/
export default function App() {
  // 原理是闭包（源码内部给我们做的）
  const [count, setCount] = useState(12);
  const [text, setText] = useState('黄晓明很油腻~');
  console.log(5, count, setCount);
  const [list, setList] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9]);
  //   在条件语句中不能够使用Hooks
  //   if (true) {
  //     const [song, setSong] = useState('123');
  //   }
  //   循环语句中会报错
  //   const lis = [1, 2, 3, 4];
  //   for (let i = 0; i < lis.length; i++) {
  //     const [song, setSong] = useState('123');
  //   }

  return (
    <>
      <h1>count-------{count}</h1>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        count+1
      </button>
      <h5>{text}</h5>
      <button
        onClick={() => {
          setText(text + '~');
        }}
      >
        内容改变
      </button>
      <ul>
        {list.map(item => {
          return <li key={item}>{item}</li>;
        })}
      </ul>
      <button
        onClick={() => {
          setList(() => {
            return list.map(item => {
              return item * 2;
            });
          });
        }}
      >
        更改数组的数据
      </button>
    </>
  );
}
// 普通·函数中使用，会报错
// function add() {
//   const [add, setadd] = useState(12);
// }

// 以use开头不是驼峰命名的会报错
// function usedd() {
//   const [add, setadd] = useState(12);
// }

// 这种自定义钩子函数，可以使用
// function useAdd() {
//     const [add, setadd] = useState(12);
//   }
